<template>
	<view>
		<!-- <u-navbar :is-back="false" title="　" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar> -->
		
		<view class="user-box" v-if="isLogin">
			<view class="flex">
				<view class="avatar">
					<u-avatar :src="pic" size="60"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-padding-b-20">{{user.nickname}}</view>
					<view class="u-font-14 u-tips-color">{{user.mobile}}</view>
				</view>
			</view>
			
			<view class="u-m-l-10 u-p-10" @tap="goProfile">
				<u-icon name="setting" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<view class="user-box" @click="goLogin()" v-else>
			<view class="u-m-r-10">
				<u-avatar :src="pic" size="60"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">未登录</view>
				<view class="u-font-14 u-tips-color"></view>
			</view>
			
		</view>
		
		<view class="user-list">
			<view class="u-margin-top-20">
				<u-cell-group>
					<u-cell icon="rmb-circle" title="支付" @click="ceshi()"></u-cell>
				</u-cell-group>
			</view>
			
			<view class="u-margin-top-20">
				<u-cell-group>
					<u-cell icon="star" title="订单列表" url="/pages/order/order" isLink></u-cell>
					<u-cell icon="star" title="地址" url="/pages/address/index" isLink></u-cell>
					<u-cell icon="photo" title="客服" url="/pages/chat/chat" isLink></u-cell>
					<u-cell icon="coupon" title="卡券" url="/pages/coupon/coupon" isLink></u-cell>
					<u-cell icon="setting" title="设置" url="/pages/setting/setting" isLink></u-cell>
				</u-cell-group>
			</view>
			
			<view class="u-margin-top-20">
				<u-cell-group>
					<u-cell icon="star" title="退出" @click="logout"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex';
	export default {
		data() {
			return {
				pic:'',
			}
		},
		onShow() {
			let t = uni.getStorageSync("token");
			console.log(t);
		},
		computed:{
			...mapState(['user']),
			...mapState(['token']),
			...mapGetters(['isLogin']),
		},
		methods: {
			...mapActions(['logout']),
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			
			ceshi(){
				console.log(this.user,this.isLogin,this.token);

			},

			goProfile(){
				uni.navigateTo({
					url:'/pages/setting/setting'
				})
			},
			
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 40rpx;
	justify-content: space-between;
	
	.flex{
		display: flex;
		align-items: center;
	}
	.u-flex-1{
		flex:1;
	}
	
	.avatar{
		margin-right: 20rpx;
	}
}
.user-list{
	background-color: #fff;
	margin-top: 20rpx;
}
</style>
